<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>科普中国用户个人信息</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/user.css">
    <link rel="shortcut icon" href="favicon.ico">
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<script src="layui/layui.js"></script>
	<style type="text/css">
		#div66{padding-left:10px; padding-bottom:10px; width:100%;font: 700 14px/40px 'Microsoft YaHei';}
	</style>
    <link rel="shortcut icon" href="favicon.ico">
 <style>
 .movie-vip{
     width: 28px;
    height: 27px;
    color: lightpink;
    border: 1px solid #FC3F4C;
    border-radius: 3px;
    line-height: 27px;
    font-size: 18px;
    }
 </style>


	<link rel="stylesheet" href="layui/css/layui.css" media="all">
</head>
<body>
<!--site-nav start, 这里使用清除浮动的方式让这个盒子具有高度-->
<div class="site-nav clearfix">
    <div class="w">
        <div class="site-nav-logo">
            <a href="index.html" class="logo"><img src="https://img3.kepuchina.cn/images/2018/logo.png" alt=""></a>
        </div>
        <div class="site-nav-search">
            <form action="" method="get">
                <input type="text" placeholder="请输入电影名称">
                <button type="submit">搜索</button>
            </form>
        </div>
        <div class="site-nav-r">
            <ul>
                
                <!--<li><a href="login.html">登录</a></li>

                <li><a href="register.html">注册</a></li>-->
                <!-- <li><a href="index.html">退出</a></li> -->
                <c:if test="${sessionScope.userVip==1}">
                		   <li style="color:lightpink">欢迎尊贵的VIP会员：${sessionScope.userName}<span class="movie-vip">VIP</span></li>
                		</c:if>
            <!--     <li><a href="register.html">注册</a></li>-->        
               <li><a href="index.html">首页</a></li>
                <li><a href="outuser">退出</a></li>

            </ul>
        </div>
    </div>
</div>
<!--site-nav end-->

<!--useinfo start-->
<div class="userinfo clearfix">
    <div class="w">
        <div class="userinfo-l">
            <ul id="userinfo">
                <li class="current">会员中心</li>
                <li>修改密码</li>
                <li>评论记录</li>
                <li>观影记录</li>
                <li>收藏电影</li>
            </ul>
        </div>
        <div class="userinfo-r">
            <div class="user-center">
                <span class="title">会员中心</span>
                <%-- <div class="layui-form-item">
                          <label class="layui-form-label">头像</label>
                          <div class="layui-input-inline">
                            <input name="avatar" lay-verify="required" name="userImg" id="userImg" placeholder="图片位置" value="<%=request.getAttribute("userImg") %>" class="layui-input">
                          </div>                 
                       </div>
                       
						 <div class="layui-upload">
						  <button type="button" class="layui-btn" name="mfile" id="test1">上传图片</button>
						  <div class="layui-upload-list" >
						    <img class="layui-upload-img" id="demo1">
						    <p id="demoText"></p>
						  </div>
						</div> --%>
                <form action="upduser" method="post" enctype="multipart/form-data">
                		<div class="user-center-content"> 
                		<label for="userName" >用户名</label>
                		
                        <input type="text" placeholder="用户名" readonly="readonly" value="${userName}" name="userName" id="userName" >
                        <label for="userNickName">昵称</label>
                        <input type="text" placeholder="昵称" value="${userNickName}" name="userNickName" id="userNickName" >
                     <div class="layui-form-item">
                          <label >头像</label>
                          <div class="layui-input-inline">
                            <input name="avatar" lay-verify="required" name="userImg" id="userImg" placeholder="图片位置" value="${userImg}" class="layui-input">
                          </div>                 
                       </div>
                       
						 <div class="layui-upload">
						  <button type="button" class="layui-btn" name="mfile" id="test1">上传图片</button>
						  <div class="layui-upload-list" >
						    <img class="layui-upload-img" id="demo1">
						    <p id="demoText"></p>
						  </div>
						</div> 
                          </div>
                        	
                        <div id="div66">
                        <label for="userSex">性别</label>
                          <div class="layui-form-item">
                        	<c:if test="${userSex=='男' }">
                            &nbsp;&nbsp;<input type="radio" name="userSex" value="男" title="男"checked>男&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="userSex" value="女" title="女">女
                            </c:if>
                            <c:if test="${userSex=='女' }">
                            &nbsp;&nbsp;<input type="radio" name="userSex" value="男" title="男">男&nbsp;&nbsp;&nbsp;
                            <input type="radio" name="userSex" value="女" title="女" checked>女
                            </c:if>
                            </div>
                           </div>
                           
                         <div class="user-center-content"> 
                        <label for="tel">手机</label>
                        <input type="text" placeholder="手机" value="${userTel}"  name="userTel" id="userTel">
                        <label for="tel">注册时间</label>
                        <input type="text" placeholder="注册时间" readonly="readonly" value="${userDate}"  name="userDate" id="userDate">
                        <button type="submit">保存修改</button>
                        </div>
                    </form>
                
               
                  
                
            </div>
            <div class="user-pwd">
                <span class="title">修改密码</span>
                <form action="updpwd" method="post">
                    <label for="pwd1">旧密码</label>
                    <input type="password" placeholder="旧密码" name="pwd1" id="pwd1">
                    <label for="pwd2">新密码</label>
                    <input type="password" placeholder="新密码" name="pwd2" id="pwd2">
                    <label for="pwd3">确认新密码</label>
                    <input type="password" placeholder="确认新密码" name="pwd3" id="pwd3">
                    <button type="submit">修改密码</button>
                </form>
            
            
            </div>
            <div class="user-comment">
                <span class="title">评论记录</span>
            
                <c:if test="${list22!=null}">
                <c:forEach var="msg" items="${list22}">
                <div class="comment-content">
                    <div class="userlogo">
                        <img src="${userImg}" >
                    </div>
                    <div class="usercontent">
                        <div class="usercontent-title">
                            ${userNickName}<span>&nbsp;&nbsp;评论于&nbsp;&nbsp;${msg.comTime}</span>
                        </div>
                        <div class="usercontent-con">
                        	 ${msg.comContent}
                        </div>
                    </div>
                </div>
                </c:forEach>
               </c:if>
               <c:if test="${list22==null}">
				<div class="comment-content">
           
                    <div class="usercontent">
                        <div class="usercontent-title">
                            <span>&nbsp;&nbsp;暂无评论记录&nbsp;&nbsp;</span>
                        </div>
                    </div>
                </div>
               </c:if>
                <!--评论分页-->
                <div class="comments-page">
                    <ul>
                        <li><a class="page-btn" href="#">首页</a></li>
                        <li><a class="page-btn" href="#">上一页</a></li>
                        <li><a class="page-btn" href="#">1&nbsp;/&nbsp;10</a></li>
                        <li><a class="page-btn" href="#">下一页</a></li>
                        <li><a class="page-btn" href="#">尾页</a></li>
                    </ul>

                </div>
            </div>
            
            
            <div class="user-logininglog">
                <span class="title">观影记录</span>
					<c:if test="${list33!=null}">
				<c:forEach var="msg" items="${list33}">
                 <div class="moviecol-con">
                    <div class="usercontent-title">
                    ${userNickName}<span>&nbsp;&nbsp;观看于&nbsp;&nbsp;${hrTime}</span>
                    </div>
                    <div class="moviecol-con-l">
                    <a href="javascript:;" class="media-left" style="float: left;">
                    <img src="${videoImg2}" height="83px" width="131px">
                    </a>
                    
                    </div>
                    
                    <div class="moviecol-con-r">
                        <div class="moviecol-con-title">
                            <span class="movie-title">
                               ${videoName2}
                            </span>
                            <a class="movie-play" href="${videoUrl}">
                               	 ▶播放影片
                            </a>
                        </div>
                        <span class="moviecol-con-desc">
				          ${videoContent2}
                        </span>
                    </div>
                </div>
                </c:forEach>
                </c:if>

               <c:if test="${list33==null}">
				<div class="comment-content">
           
                    <div class="usercontent">
                        <div class="usercontent-title">
                            <span>&nbsp;&nbsp;暂无观影记录&nbsp;&nbsp;</span>
                        </div>
                    </div>
                </div>
               </c:if>

                <!--收藏电影分页-->
                <div class="movies-col-page">
                    <ul>
                        <li><a class="page-btn" href="#">首页</a></li>
                        <li><a class="page-btn" href="#">上一页</a></li>
                        <li><a class="page-btn" href="#">1&nbsp;/&nbsp;10</a></li>
                        <li><a class="page-btn" href="#">下一页</a></li>
                        <li><a class="page-btn" href="#">尾页</a></li>
                    </ul>

                </div>

            </div>
            
            <div class="user-moviecol">
                <span class="title">收藏电影</span>
				<c:if test="${list11!=null}" >
				<c:forEach var="msg" items="${list11}">
                 <div class="moviecol-con">
                    <div class="moviecol-con-l">
                    <a href="javascript:;" class="media-left" style="float: left;">
                    <img src="${msg.videoImg}" height="83px" width="131px">
                    </a>
                    
                    </div>
                    
                    <div class="moviecol-con-r">
                        <div class="moviecol-con-title">
                            <span class="movie-title">
                               ${msg.videoName}
                            </span>
                            <a class="movie-play" href="${msg.videoUrl}">
                               	 ▶播放影片
                            </a>
                        </div>
                        <span class="moviecol-con-desc">
				               ${msg.videoContent}
                        </span>
                    </div>
                </div>
                </c:forEach>
                </c:if>

               <c:if test="${list11==null}">
				<div class="comment-content">
           
                    <div class="usercontent">
                        <div class="usercontent-title">
                            <span>&nbsp;&nbsp;暂无收藏记录&nbsp;&nbsp;</span>
                        </div>
                    </div>
                </div>
               </c:if>

                <!--收藏电影分页-->
                <div class="movies-col-page">
                    <ul>
                        <li><a class="page-btn" href="#">首页</a></li>
                        <li><a class="page-btn" href="#">上一页</a></li>
                        <li><a class="page-btn" href="#">1&nbsp;/&nbsp;10</a></li>
                        <li><a class="page-btn" href="#">下一页</a></li>
                        <li><a class="page-btn" href="#">尾页</a></li>
                    </ul>

                </div>
            </div>
            
        </div>
    </div>
</div>
<!--useinfo end-->

<!--footer start-->
<div class="footer clearfix">
    <div class="w">
        <div class="footer-links">
            <dl>
                <!--注意dl下面有dt和dd两个级别，别搞混了-->
                <dt><a href="#">关于我们</a></dt>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">网站地图</a></dd>
                <dd><a href="#">常见问题</a></dd>
                <dd><a href="#">投稿须知</a></dd>
            </dl>
            <dl>
                <!--注意dl下面有dt和dd两个级别，别搞混了-->
                <dt><a href="#">联系我们</a></dt>
                <dd><a href="#">邮箱</a></dd>
                <dd><a href="#">微博</a></dd>
                <dd><a href="#">QQ群</a></dd>
                <dd><a href="#">微信</a></dd>
            </dl>
            <dl>
                <!--注意dl下面有dt和dd两个级别，别搞混了-->
                <dt><a href="#">网站服务</a></dt>
                <dd><a href="#">创业报道</a></dd>
                <dd><a href="#">广告支持</a></dd>
                <dd><a href="#">网站推广</a></dd>
                <dd><a href="#">商务合作</a></dd>
            </dl>
            <dl>
                <!--注意dl下面有dt和dd两个级别，别搞混了-->
                <dt><a href="#">帮助中心</a></dt>
                <dd><a href="#">登陆注册</a></dd>
                <dd><a href="#">找回密码</a></dd>
                <dd><a href="#">自助服务</a></dd>
                <dd><a href="#">资源下载</a></dd>
            </dl>
            <dl class="last" id="lastlogo">
                <dt><a href="#">关注我们</a></dt>
                <dd><a href="#">微信</a></dd>
                <dd><a href="#">QQ群</a></dd>
                <dd><a href="#">新浪</a></dd>
                <dd><a href="#">邮箱</a></dd>
                <div class="img-show" id="imgshow">
                    <img src="images/weixin.jpg" alt="">
                </div>
            </dl>
        </div>
    </div>
</div>
<!--footer end-->


<script src="js/xframe-min-1.0.js" type="text/javascript"></script>
<script src="js/base.js" type="text/javascript"></script>
<script>
    // 用户中心的切换效果实现开始-----------------------------------------------------------------
    // 开启用户中心切换按钮
    window.onload = function () {
        toggleUserButton();
    }


    /**
     * 用户中心切换按钮
     */
    function toggleUserButton() {
        $('#userinfo li').on('click', function () {
            var text = $(this).text();
            $('#userinfo li').each(function () {
                $(this).css('backgroundColor', '');
                $(this).css('color', 'black');
            });
            $(this).css('color', 'white');
            $(this).css('backgroundColor', '#337AB7');
            switch (text) {
                case '会员中心':
                    $('.user-center').show();
                    $('.user-pwd').hide();
                    $('.user-comment').hide();
                    $('.user-logininglog').hide();
                    $('.user-moviecol').hide();
                    break;
                case '修改密码':
                    $('.user-center').hide();
                    $('.user-pwd').show();
                    $('.user-comment').hide();
                    $('.user-logininglog').hide();
                    $('.user-moviecol').hide();
                    break;
                case '评论记录':
                    $('.user-center').hide();
                    $('.user-pwd').hide();
                    $('.user-comment').show();
                    $('.user-logininglog').hide();
                    $('.user-moviecol').hide();
                    break;
                case '观影记录':
                    $('.user-center').hide();
                    $('.user-pwd').hide();
                    $('.user-comment').hide();
                    $('.user-logininglog').show();
                    $('.user-moviecol').hide();
                    break;
                case '收藏电影':
                    $('.user-center').hide();
                    $('.user-pwd').hide();
                    $('.user-comment').hide();
                    $('.user-logininglog').hide();
                    $('.user-moviecol').show();
                    break;
            }
        });
    }

    // 用户中心的切换效果实现结束-----------------------------------------------------------------



</script>
</body>
	<!-- 修改成功弹窗提示并跳转 -->
	<% if(request.getAttribute("defeat1")!=null){
	  %>
	  <script type="text/javascript">
		  layui.use('layer', function(){
			  var layer = layui.layer;
			  layer.msg('修改成功，即将返回登入页面！', {
				  icon: 1,
				  time: 2000 //2秒关闭（如果不配置，默认是3秒）
				}, function(){
				  //do something
				  location.href="index";
				});  
			}); 			      
	</script>
 <% 
  }%>

   <!-- 修改失败弹窗提示2 -->
	<% if(request.getAttribute("defeat2")!=null){
	  %>
	  <script type="text/javascript">
	  layui.use('layer', function(){
		  var layer = layui.layer;
		  layer.msg('修改失败,两次密码不一致！');
		});  

	</script>
 <% 
  }%>
  
  
     <!-- 修改失败弹窗提示3 -->
	<% if(request.getAttribute("defeat3")!=null){
	  %>
	  <script type="text/javascript">
	  layui.use('layer', function(){
		  var layer = layui.layer;
		  layer.msg('修改失败,旧密码输入失败！');
		});  

	</script>
 <% 
  }%>
  
    <% if(request.getAttribute("A")!=null){
	  %>
	  <script type="text/javascript">
	   $('.user-center').hide();
       $('.user-pwd').show();
       $('.user-comment').hide();
       $('.user-logininglog').hide();
       $('.user-moviecol').hide();	      
	</script>
 <% 
  }%>
	  
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<!-- 上传图片 -->
<!-- <script src="layui/lay/modules/jquery.js"></script> -->
<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#test1'
    ,url: 'upduserImg'
    ,accept:'file'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#demo1').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      //上传成功
      if(res.code ==0)
    	  {
    	  return layer.msg('上传成功');
    	  }
     <%--  //上传完毕回调
      layui.use('layer', function(){
              var layer = layui.layer;
                layer.msg(res.url, {
                       time: 2000, //6s后自动关闭
                       icon:1
                 },function(){
                	 console.log("res :"+res.code);
                	 $(".layui-nav-img").attr("src","myfiles/"+res.code)
                	 //把路径赋值给头像文本框
                	 console.log(<%=request.getAttribute("orig") %>)
                	 $("#userImg").val("myfiles/"+<%=request.getAttribute("orig") %>)
                	 
                 });
            }); --%>
    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
});
</script>	

</html>